<template>
    <el-pagination v-show="total >= 0" small background
      :current-page="page"
      :page-size="pageSize"
	  :total="total"
	  layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      />
</template>
<script>
	export default {
		props: {
			modelValue: { type: Object, default: () => {}},
		},
		data() {
			return {
				total: 0,
				page: 1,
				pageSize: 10,
                sc_search: {
					page: 1,
        			pageSize: 20,
                    total: 0,
					paging: 0,
				},
			}
		},
		mounted() {
			this.init()
		},
        watch: {
			modelValue(val) {
				this.sc_search = val
				this.init()
			},
			"modelValue.total": function(val) {
				this.total = val
				this.sc_search.total = val
			},
		},
		methods: {
			init() {
				this.page = this.sc_search.page
				this.pageSize = this.sc_search.pageSize
				this.total = this.sc_search.total
			},
            //分页页面大小发生变化
    		handleSizeChange(val) {
			  this.pageSize = val
			  this.sc_search.pageSize = val
			  this.sc_search.paging += 1
			  this.$emit('update:modelValue', this.sc_search)
    		},
			//当前页码发生变化
			handleCurrentChange (val) {
			  this.page = val
			  this.sc_search.page = val
			  this.sc_search.paging += 1
			  this.$emit('update:modelValue', this.sc_search)
    		},
		}
	}
</script>